<template>
  <div id="app" class="flex">
    <NavigationBar />
    <main class="flex-1 ml-64 min-h-screen">
      <div class="max-w-7xl mx-auto">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import NavigationBar from './components/NavigationBar.vue'
</script>

<style scoped>
#app {
  background-color: #f8fafc;
}

/* 平滑过渡效果 */
main {
  transition: margin-left 0.3s ease;
}

/* 响应式设计 - 在小屏幕上隐藏侧边栏 */
@media (max-width: 768px) {
  main {
    margin-left: 0;
  }
}
</style>